I have a basic HTML/JavaScript query that references a URL. Instead of referencing a single URL, I'd like to reference 3, and have them cycle through on a timer.
For example:
currently I have URL1 = Dashboard1, and I would like there to be a URL2 = Dashboard2, and URL3 = Dashboard3.
Here is my script:
<html>
<head></head>
<body>
<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function initializeViz() {
var placeholderDiv = document.getElementById("tableauViz");
var url1 = "http://ccapptabdev01/t/Gas/views/ERXCommissioningDashboard/Dashboard1";
var options = {
width: 2000,
height: 1200,
hideTabs: true,
hideToolbar: false,
onFirstInteractive: function () {
workbook = viz.getWorkbook();
activeSheet = workbook.getActiveSheet();
}
};
viz = new tableauSoftware.Viz(placeholderDiv, url1, options);
}
$(initializeViz);
</script>
<script type="text/javascript">
function RefreshViz(){
//alert("test");
viz.refreshDataAsync();
}
if (document.addEventListener) {
window.addEventListener("load", RefreshViz, false);
} else if (document.attachEvent) {
window.attachEvent("onload", RefreshViz);
}
setInterval(RefreshViz, 30000);
</script>
<div id="tableauViz">
</div>
</body>
</html>
Thank you! edited my script, however when run it only plays the first URL of the three. Here is the edited script:
<html>
<head></head>
<body>
<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var vizs = [];
vizs.push(initializeViz('tableauViz1', "http://ccapptabdev01/t/Gas/views/SCADA_SERVER_DASHBOARD/Dashboard1"));
vizs.push(initializeViz('tableauViz2', "http://ccapptabdev01/t/Gas/views/ERXTrendingTool/Dashboard1"));
vizs.push(initializeViz('tableauViz3', "http://ccapptabdev01/t/Gas/views/ERXTrendingTool/Dashboard1"));
function initializeViz(div, url) {
var placeholderDiv = document.getElementById(div);
var options = {
width: 2000,
height: 1200,
hideTabs: true,
hideToolbar: false,
onFirstInteractive: function () {
workbook = viz.getWorkbook();
activeSheet = workbook.getActiveSheet();
}
};
return {div: placeholderDiv, vis: new tableauSoftware.Viz(placeholderDiv, url, options)};
}
</script>
<script type="text/javascript">
var visible = 0; //0, 1 or 2 - maintains state
function rotate() {
visible++;
if (visible+1 > vizs.length()) {
visible = 0;
}
//hide all
vizs.forEach(function(vis, index, array) {
vis.placeholderDiv.style.display === 'none';
});
//show and update
vizs[visible].placeholderDiv.style.display = 'block';
vizs[visible].viz.refreshDataAsync();
}
setInterval(rotate, 15000);
</script>
<div id="tableauViz1">
</div>
<div id="tableauViz2" style="display:none;">
</div>
<div id="tableauViz3" style="display:none;">
</div>
</body>
</html>
Additional Edits:
<html>
<head></head>
<body>
<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var vizs = [];
vizs.push(initializeViz('tableauViz1', "http://ccapptabdev01/t/Gas/views/SCADA_SERVER_DASHBOARD/Dashboard1"));
vizs.push(initializeViz('tableauViz2', "http://ccapptabdev01/t/Gas/views/ERXTrendingTool/Dashboard1"));
vizs.push(initializeViz('tableauViz3', "http://ccapptabdev01/t/Gas/views/ERXTrendingTool/Dashboard1"));
function initializeViz(div, url) {
var placeholderDiv = document.getElementById(div);
var options = {
width: 2000,
height: 1200,
hideTabs: true,
hideToolbar: false,
onFirstInteractive: function () {
workbook = viz.getWorkbook();
activeSheet = workbook.getActiveSheet();
}
};
return {div: placeholderDiv, viz: new tableauSoftware.Viz(placeholderDiv, url, options)};
}
</script>
<script type="text/javascript">
var visible = 0; //0, 1 or 2 - maintains state
function rotate() {
visible++;
if (visible+1 > vizs.length()) {
visible = 0;
}
//hide all
vizs.forEach(function(viz, index, array) {
viz.placeholderDiv.style.display === 'none';
});
//show and update
vizs[visible].placeholderDiv.style.display = 'block';
vizs[visible].viz.refreshDataAsync();
}
setInterval(rotate, 15000);
</script>
<div id="tableauViz1">
</div>
<div id="tableauViz2" style="display:none;">
</div>
<div id="tableauViz3" style="display:none;">
</div>
</body>
</html>
